<!-- 采购管理-基础设置-供应商信息模板 -->
<template>
  <div class="index">
    <pageHeader
      :title="title"
      :breadCrumb="breadCrumb"
      :show-back="true"
    ></pageHeader>
    <div class="content">
      <div class="operater">
        <div>
          <a-button
            :style="{
              margin: '0 20px 0 10px',
            }"
            type="primary"
            @click="goContractAddSales()"
            size="large"
            >新建供应商录入模板</a-button
          >
          <!-- <a-button type="outline" size="large" @click="goContractAddBuy()"
            >新增级别</a-button
          > -->
        </div>
        <div>
          <a-input-search
            search-button
            :style="{
              width: '320px',
            }"
            size="large"
            placeholder="请输入模板名称"
            @change="search"
            v-model="searchVal"
          />
        </div>
      </div>
      <div v-for="outerItem in supplierList.list" :key="outerItem.id">
        <div class="model-title">{{ `${outerItem.name}供应商` }} </div>
        <div>
          <div class="cards">
            <DemandCard
              ref="demandCardRef"
              v-for="innerItem in outerItem.template"
              :key="innerItem.id"
              @del="del(innerItem.id)"
              @statusChange="statusChange"
              :form="innerItem"
              @goDemandCreate="goDemandCreate"
            ></DemandCard>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted, inject } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    GetSupplierTemplateListInfo,
    DelSupplierTemplateInfo,
    PutSupplierTemplateStateInfo,
  } from '@/api/buy-management/supplier-management/base-setting';
  import dayjs from 'dayjs';

  const router = useRouter();
  const demandCardRef = ref();

  const title: string = '供应商信息模板';
  const breadCrumb: string[] = [
    '采购管理',
    '供应商管理',
    '基础设置',
    '供应商信息模板',
  ];

  const supplierList = reactive<any>({
    list: [],
  });

  const getData = async () => {
    try {
      const res = await GetSupplierTemplateListInfo();
      supplierList.list = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getData();

  let searchVal = ref(''); // 搜索框的值

  // 搜索框
  const search = async () => {
    try {
      const res = await GetSupplierTemplateListInfo({
        name: searchVal.value,
      });
      supplierList.list = res;
    } catch (err: unknown) {
      console.log(err);
    }
  };

  //多个需求模板状态，只能有一个是开启状态
  const statusChange = async (form: any) => {
    try {
      await PutSupplierTemplateStateInfo({
        id: form.id,
        supLevel: form.supLevel,
      });
      getData();
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 点击编辑按钮去往详情
  const goDemandCreate = (params = {}) => {
    router.push({
      name: 'TemplateSupplierAdd',
      query: params,
    });
  };

  // 新增一项
  const goContractAddSales = (params = {}) => {
    router.push({
      name: 'TemplateSupplierAdd',
      query: params,
    });
  };

  // 删除一项
  const del = async (id: number) => {
    try {
      await DelSupplierTemplateInfo({
        id,
      });
      getData();
    } catch (err: unknown) {
      console.log(err);
    }
  };
</script>

<style scoped lang="less">
  .index {
    .content {
      padding: 16px;
    }
    .operater {
      margin: 24px 0;
      display: flex;
      justify-content: space-between;
    }
    .model-title {
      background: rgba(242, 246, 252, 1);
      padding: 16px 24px;
      font-size: 16px;
    }
    .title {
      height: 30px;
      background-color: #fff;
    }
    .title::before {
      position: relative;
      display: inline-block;
      width: 5px;
      height: 20px;
      content: '';
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #165dff;
      margin-right: 10px;
    }
    .cards {
      padding: 16px 24px;
      display: flex;
      flex-wrap: wrap;
    }
  }
</style>
